<template>
  <div class="modulefirst">
    <ul>
      <li v-for="(item, i) in items" :key="i">
        <div class="modulefirst-title">{{ item.title }}</div>
        <div class="modulefirst-item">
          <div class="modulefirst-num">
            <countTo :start-val="0" :end-val="item.num" :duration="5000" />
          </div>
          <div class="modulefirst-unit">{{ item.unit }}</div>
        </div>
      </li>
    </ul>
    <dv-decoration-10 style="width: 100%; height: 5px" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { CountTo } from "vue3-count-to";

const items = ref([
  { title: "涵洞隧道", num: "434", unit: "个" },
  { title: "涵洞", num: "222", unit: "个" },
  { title: "涵洞隧", num: "3334", unit: "个" },
  { title: "涵洞隧道", num: "546", unit: "个" },
  { title: "涵洞隧", num: "78", unit: "个" },
  { title: "涵洞", num: "53", unit: "个" },
  { title: "涵洞", num: "567", unit: "个" },
  { title: "隧道", num: "22", unit: "个" },
  { title: "洞隧道", num: "22", unit: "个" },
]);
</script>

<style scoped></style>
